import { memo } from "react"
import { RankingWrapper } from "./style"
import AreaHeader from "@/components/area-header"
import { useAppSelector } from "@/store"
import { shallowEqual } from "react-redux"
import type { ReactNode, FC } from "react"
import TopRankingItem from "../top-ranking-item"

interface IProps {
  children?: ReactNode
}

const TopRanking: FC<IProps> = () => {
  const { rankings = [] } = useAppSelector(
    (state) => ({
      rankings: state.recommend.rankings
    }),
    shallowEqual
  )

  return (
    <RankingWrapper>
      <AreaHeader title="榜单" moreLink="/discover/ranking" />
      <div className="content">
        {rankings.map((item) => {
          return <TopRankingItem key={item.id} itemData={item} />
        })}
      </div>
    </RankingWrapper>
  )
}

export default memo(TopRanking)
